<template>
  <div class="number-container d-flex justify-content-center align-items-center">
    <!-- 减一 -->
    <button type="button" class="btn btn-light btn-sm" @click="sub">-</button>
    <!--购买的数量-->
    <span class="number-box">{{ num }}</span>
    <!--加一-->
    <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
  </div>
</template>

<script>
import bus from '@/components/eventBus.js'
export default {
  props: {
    //商品的ID
    id: {
      required: true,
      type: Number
    },
    //接收到的num数量值
    num: {
      default: 1,
      type: Number
    }
  },
  methods: {
    //点击按钮加一
    add() {
      bus.$emit('share',{id:this.id,value:this.num+1})
    },
    //点击按钮减一
    sub() {
      if (this.num === 0) {
        return
      }
      bus.$emit('share',{id:this.id,value:this.num-1})
    }
  }
}
</script>

<style lang="less" scoped>
.number-container {
  display: flex;
  width: 40%;
  height: 20px;
  .number-box {
    flex: 2;
    margin: 0 5px;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    border: 1px solid blue;
  }
  .btn-light {
    flex: 1;
  }
  span {
    color: blue;
  }
}
</style>